<template>
	<div>
		<el-avatar shape="square" :size="100" :src="userInfos.userPhoto"></el-avatar>
		<span style="color: crimson;">{{userInfos.userNickname}}</span>
		您的用户邀请码：<input type="button" v-model="userInfos.userCode" />
		用户身份：<input type="button" v-model="userInfos.roleName" />
		<template>
			<span v-if="userInfos.roleId == 1" style="margin-left: 10px">游客</span>
			<span v-if="userInfos.roleId == 2" style="margin-left: 10px">抢租客</span>
			<span v-if="userInfos.roleId == 3" style="margin-left: 10px">出租方</span>
		</template>
		<el-collapse v-model="activeName" accordion>
			<!-- 01 -->
			<el-collapse-item title="我的车位" name="1">
				<el-upload action="http://localhost:80/file/upload" :on-success="handle_success">
					<!-- :on-success="函数名"，函数名后面不要跟括号 -->
					<el-button size="small" type="primary">请上传您的车位产权信息图</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
				<form>
					<template>
						<el-select v-model="rentalParam.communityId" placeholder="请选择小区">
							<el-option v-for="item in options" :key="item.communityId" :label="item.communityName" :value="item.communityId">
							</el-option>
						</el-select>
					</template>
					<input type="text" v-model="rentalParam.carportAddress" placeholder="请输入车位详细地址" />
					<input type="text" v-model="rentalParam.carportNumber" placeholder="请输入车位编号" />
					<input type="button" value="提交车位信息" @click="addCarport()" />
				</form>
				<template>
					<el-table :data="carports" style="width: 100%">
						<el-table-column label="小区名">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.communityName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="车位详细地址">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.carportAddress }}</span>
							</template>
						</el-table-column>
						<el-table-column label="车位号">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.carportNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column label="审核状态">
							<!-- 0. 未通过 1.审核中 2.通过 -->
							<template slot-scope="scope">
								<span v-if="scope.row.carportCheckStatus == 0" style="margin-left: 10px">未通过</span>
								<span v-if="scope.row.carportCheckStatus == 1" style="margin-left: 10px">审核中</span>
								<span v-if="scope.row.carportCheckStatus == 2" style="margin-left: 10px">通过</span>
								<!-- <span style="margin-left: 10px">{{ scope.row.carportCheckStatus }}</span> -->
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="change(scope.$index, scope.row)">发布订单</el-button>
								<router-link :to="{name:'carportDetail', params: {carportId:scope.row.carportId}}">查看已发布的订单信息</router-link>
								<!-- <template>
									<el-button type="text" @click="open(scope.$index, scope.row)">查看已发布的订单信息</el-button>
								</template> -->
								<el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除车位</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-collapse-item>
			<!-- 02 -->
			<el-collapse-item title="我的钱包" name="2">
				<div>
					<span>当前余额为：{{balance}}</span>
				</div>
				<el-button type="text" @click="showAddMoneyModal = true">余额充值</el-button>
				<el-button type="text" style="margin-left: 30px" @click="chargeBalance">查看收支明细</el-button>
			</el-collapse-item>
			<el-collapse-item title="车牌管理" name="3">
				<input type="text" placeholder="请输入需要添加的车牌号" v-model="carNumber" />
				<input type="button" @click="addCarNumber()" value="添加车牌号" />
				<template>
					<el-table :data="cars" style="width: 100%">
						<el-table-column label="车牌号" width="180">
							<template slot-scope="scope">
								<i class="el-icon-time"></i>
								<span style="margin-left: 10px">{{ scope.row.carNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="danger" @click="deletecar(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-collapse-item>
			<!-- 03 -->
			<el-collapse-item title="我的优惠券" name="4">
				<el-card class="box-card" v-for="coupon in coupons">
					<span>{{coupon.description}}</span>
					<span>{{coupon.name}} </span>
					<span>{{coupon.money}}元</span>
				</el-card>
			</el-collapse-item>
			<!-- 04 -->
			<el-collapse-item title="系统设置" name="5">
				<input type="button" v-model="changeTelnumber" @click="changeTel()" /><br />
				<div v-if="userInfos.roleId == 1">
					用户实名：
					<input type="text" placeholder="请输入您的真实姓名" v-model="userReal.userRealName" />
					<el-upload action="http://localhost:80/file/upload" :on-success="handle_success01">
						<el-button size="small" type="primary">请上传您的身份证正面图（国徽面）</el-button>
						<div slot="tip" class="el-upload__tip"></div>
					</el-upload>
					<el-upload action="http://localhost:80/file/upload" :on-success="handle_success02">
						<el-button size="small" type="primary">请上传您的身份证背面照</el-button>
						<div slot="tip" class="el-upload__tip"></div>
					</el-upload>
					<input type="button" value="确认提交实名信息" @click="verified()" />
				</div>
				<input type="button" value="点击修改登陆密码" @click="dialogVisible04=true" />
			</el-collapse-item>
		</el-collapse>

		<el-dialog title="发布车位订单" :visible.sync="dialogFormVisible" width="80%">
			<el-form ref="form" :model="form" label-width="80px">
				<template>
					<span class="demonstration">发布的每小时单价 ：</span>
					<el-input-number v-model="form.rentalCarportUnitPrice" controls-position="right" :min="2" :max="20"></el-input-number>
				</template>
				<div class="block">
					<span class="demonstration">选择发布的时间段 ：</span>
					<el-date-picker v-model="form.rentalCarportBeginTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
					<el-date-picker v-model="form.rentalCarportEndTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="publish()">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="收支明细如下:" :visible.sync="dialogVisible01" width="60%">
			<div>
				<template>
					<el-table :data="BasePage" stripe style="width: 100%">
						<el-table-column prop="accountDetailMoney" label="数额" width="180">
						</el-table-column>
						<el-table-column prop="accountDetailDes" label="描述" width="180">
						</el-table-column>
						<el-table-column prop="createTime" label="时间" width="180">
						</el-table-column>
					</el-table>
				</template>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible01 = false">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="请输入收到的短信验证码" :visible.sync="dialogVisible02" width="60%">
			<input type="text" v-model="verificationCode" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible02 = false">取 消</el-button>
				<el-button type="primary" @click="check()">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="" :visible.sync="dialogVisible03" width="60%">
			<el-form-item label="电话号码" prop="tel">
				<el-input type="tel" v-model="newTel"></el-input>
				<el-button type="primary" @click="code()">点击获取手机验证码</el-button>
			</el-form-item>
			<el-form-item label="短信验证码" prop="verificationCode">
				<el-input type="text" v-model="verificationCode"></el-input>
			</el-form-item>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible03 = false">取 消</el-button>
				<el-button type="primary" @click="makesure()">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="" :visible.sync="dialogVisible04" width="60%">
			<el-input type="text" v-model="oldPassword" placeholder="请输入旧密码"></el-input>
			<el-input type="text" v-model="newPassword" placeholder="请输入新密码"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible04 = false">取 消</el-button>
				<el-button type="primary" @click="changePassword()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 充值模态框 -->
		<el-dialog title="充值" :visible.sync="showAddMoneyModal" width="15%">
			<el-input-number v-model="money" :min="1" :step="1" :step-strictly="true" :max="100000"/>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showAddMoneyModal = false">取 消</el-button>
				<el-button type="primary" @click="addMoney">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import $ from "jquery"
	export default {
		data() {
			return {
				// 充值模态框
				showAddMoneyModal: false,
				// 充值金额
				money: 1,
				userInfos: [],
				newTel: '',
				dialogVisible03: false,
				changeTelnumber: '点击修改手机号',
				dialogVisible02: false,
				options: [],
				oldtel: '',
				verificationCode: '',
				rentalParam: {
					communityId: '',
					carportAddress: '',
					carportNumber: '',
					carportImage: ''
				},
				dialogFormVisible: false,
				activeName: '',
				carports: [],
				rentalcarports: [],
				form: {
					carportId: '',
					rentalCarportBeginTime: '',
					rentalCarportEndTime: '',
					rentalCarportUnitPrice: '5'
				},
				coupons: [],
				cars: [],
				carNumber: '',
				balance: '0',
				dialogVisible01: false,
				pageNum: '1',
				pageSize: '20',
				BasePage: [],
				userReal: {
					userRealIdcard: '',
					userRealIdcardImageFront: '',
					userRealIdcardImageBack: '',
					userRealName: '',
					userRealRdcardExpiretionTime: ''
				},
				oldPassword:'',
				newPassword:'',
				dialogVisible04:false
			};
		},
		methods: {
			changePassword:function(){
				var _this = this;
				$.ajax({
					url: "http://localhost:80/user/updatePassword",
					type: "post",
					data: {
						oldPassword:_this.oldPassword,
						newPassword:_this.newPassword,
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						alert(data.message);
						_this.dialogVisible04 = false;
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			verified: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/user/verified",
					type: "post",
					data: {
						userRealIdcardImageFront: _this.userReal.userRealIdcardImageFront,
						userRealIdcardImageBack: _this.userReal.userRealIdcardImageBack,
						userRealName: _this.userReal.userRealName
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						alert(data.message)
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			handle_success01: function(res) {
				console.log(res)
				this.userReal.userRealIdcardImageFront = res.message;
			},
			handle_success02: function(res) {
				console.log(res)
				this.userReal.userRealIdcardImageBack = res.message;
			},
			code: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/user/code",
					type: "get",
					data: {
						tel: _this.newTel,
					},
					success: function(data) {
						alert(data.message)
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			makesure: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/user/updatetel",
					type: "get",
					data: {
						tel: _this.newTel,
						verificationCode: _this.verificationCode,
					},
					success: function(data) {
						alert(data.message)
						this.dialogVisible03 = false;
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			check: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/user/phoneCheck",
					type: "get",
					data: {
						tel: _this.oldtel,
						VerificationCode: _this.verificationCode,
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.dialogVisible02 = false;
						_this.changeTelnumber = "点击修改手机号";
						_this.dialogVisible03 = true;
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			changeTel: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/user/getTel",
					type: "get",
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.oldtel = data.message;
						_this.changeTelnumber = "验证码已经发送给当前登陆手机号"
						_this.dialogVisible02 = true;
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			handle_success(res) {
				console.log(res)
				this.rentalParam.carportImage = res.message;
				this.$message.success('图片上传成功')
			},
			addCarport: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/rentalQualification",
					type: "post",
					data: {
						communityId: _this.rentalParam.communityId,
						carportAddress: _this.rentalParam.carportAddress,
						carportNumber: _this.rentalParam.carportNumber,
						carportImage: _this.rentalParam.carportImage
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						alert("上传成功！等待后台人员审核");
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			chargeBalance: function() {
				this.dialogVisible01 = true;
				var _this = this;
				$.ajax({
					url: "http://localhost:80/account/getBalanceDetail",
					type: "get",
					data: {
						pageNum: _this.pageNum,
						pageSize: _this.pageSize,
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.BasePage = data.res.data;
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			addCarNumber: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/addCarNumber",
					type: "get",
					data: {
						carNumber: _this.carNumber
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						alert(data.message);
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			deletecar(index, row) {
				console.log(index, row);
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/deleteCarNumber",
					type: "get",
					data: {
						carId: row.carId
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						alert(data.message);
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			//发布订单前判断
			change(index, row) {
				console.log(index, row);
				this.form.carportId = row.carportId;
				if (row.carportCheckStatus == 2) {
					this.dialogFormVisible = true
				} else {
					alert("未通过审核的车位不能发布订单")
				}
			},
			//车主根据车位id发布车位订单信息
			publish() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/releaseParking",
					type: "post",
					data: _this.form,
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						alert(data.message);
						_this.dialogFormVisible = false;
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});

			},
			//查出当前用户拥有的所有车位
			findcarport: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/findcarport",
					type: "get",
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.carports = data.res;
					}
				});
			},
			//删除车位
			handleDelete(index, row) {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/deletecarport",
					type: "get",
					data: {
						"carportId": row.carportId
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						alert(data.message)
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			//通过车位id查询到当前车位已经发布的订单信息
			open(index, row) {
				var _this = this;
				if (row.carportCheckStatus != 2) {
					alert("未通过审核的车位没有发布订单")
				} else {
					$.ajax({
						url: "http://localhost:80/carport/carportdetail",
						type: "get",
						data: {
							"carportId": row.carportId
						},
						success: function(data) {
							_this.rentalcarports = data.res;
							_this.$alert(_this.rentalcarports, '发布的车位订单信息', {
								confirmButtonText: '确定',
								callback: action => {
									this.$message({
										type: 'info',
										message: `action: ${ action }`
									});
								}
							});
						}
					});
				}
			},
			//获取当前用户的所有优惠券
			getcoupons: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/user/getUserCoupons",
					type: "get",
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.coupons = data.res;
					},
					error: function(data) {
						console.log(data.responseJSON.message);
					}
				});
			},
			//查询当前用户的所有车牌信息
			getCarnumber: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/getCars",
					type: "get",
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.cars = data.res;
					},
					error: function(data) {
						console.log(data.responseJSON.message);
					}
				});
			},
			//得到当前用户的余额
			getBalance: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/account/getBalance",
					type: "get",
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.balance = data.res;
					},
					error: function(data) {
						console.log(data.responseJSON.message);
					}
				});
			},
			//获取所有小区名
			getALLCommunity: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/community/getCommunityList",
					type: "get",
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.options = data.res;
					},
					error: function(data) {
						console.log(data.responseJSON.message);
					}
				});
			},
			//获取当前用户的基础信息
			getUserInfos: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/user/getUseInfos",
					type: "get",
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.userInfos = data.res;
					},
					error: function(data) {
						console.log(data.responseJSON.message);
					}
				});
			},
			// 充值
			addMoney() {
				// 生成随机ID
				let randomId = Math.round(Math.random() * 1000) + "user" + this.userInfos.userId;
				// 跳转支付宝支付
				this.$router.push("/aliPay" + randomId + "/" + this.money + "/" + -1);
				// 跳转支付宝支付
			}
		},
		mounted() {
			this.findcarport();
			this.getcoupons();
			this.getCarnumber();
			this.getBalance();
			this.getALLCommunity();
			this.getUserInfos();
		}
	}
</script>

<style>
	.text {
		font-size: 14px;
	}

	.item {
		padding: 18px 0;
	}

	.box-card {
		width: 480px;
	}
</style>
